<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	
	<div class="chord">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".chord").append('svg').attr({"width":width,"height":height});
		
		var continent = ["亚洲","欧洲","非洲","美洲","大洋洲"];
		var population = [
			[9000,870,3000,1000,5200],
			[3400,8000,2300,4922,374],
			[2000,2000,7700,4881,1050],
			[3000,8012,5531,500,400],
			[3540,4310,1500,1900,300]
		]
		
		var chord = d3.layout.chord()
						.padding(0.03)
						.sortSubgroups(d3.ascending)
						.matrix(population)
		
//		console.log(chord.groups())
//		console.log(chord.chords())

		var gChord = svg.append("g")
						.attr("transform","translate("+width/2+","+height/2+")")
		
		var gOuter = gChord.append("g");
		
		var gInner = gChord.append("g");
		var color = d3.scale.category20();
		
		var innerRadius = width / 2 *0.7;
		var outerRadius = innerRadius * 1.1;
		
		var arcOuter = d3.svg.arc()
						.innerRadius(innerRadius)
						.outerRadius(outerRadius);
		
		gOuter.selectAll(".outerPath")
				.data(chord.groups())
				.enter()
				.append("path")
				.attr("class","outerPath")
				.style("fill",function(d) {return color(d.index)})
				.attr("d",arcOuter);
		
		gOuter.selectAll(".outerText")
				.data(chord.groups())
				.enter()
				.append("text")
				.each(function(d,i) {
					d.angle = (d.startAngle + d.endAngle) / 2;
					d.name = continent[i];
				})
				.attr("class","outerText")
				.attr("dy","0.35em")
				.attr("transform",function(d) {
					var result = "rotate("+(d.angle*180/Math.PI)+")";
					result += "translate(0,"+-1.0 * (outerRadius + 10)+")";
					if(d.angle > Math.PI * 3/4 && d.angle < Math.PI * 5 / 4){
						result += "rotate(180)";
						return result;
					}
				})
				.text(function(d) {
					return d.name;
				})
		var arcInner = d3.svg.chord().radius(innerRadius);
		
		gInner.selectAll(".innerPath")
			.data(chord.chords())
			.enter()
			.append("path")
			.attr("class","innerPath")
			.attr("d",arcInner)
			.style("fill",function(d) {
				return color(d.source.index)
			})
	</script>
</body>
</html>